import { useState, useEffect } from 'react';
import img from './img/image.png'
import styles from './index.module.css';
import Nabar from '../../conpoment/Nabar';

function Index() {
  const [isRefreshing, setIsRefreshing] = useState(false);
  const [lastRefreshTime, setLastRefreshTime] = useState(new Date());
  
  // 模拟数据
  const doctorInfo = {
    name: '刘医生',
    title: '主任医师',
    department: '门诊外一科',
    hospital: '四川省保健院南苑',
    avatar: img
  };

  const [queueInfo, setQueueInfo] = useState({
    currentNumber: 15,
    myNumber: 20,
    waitingCount: 5
  });

  // 模拟刷新队列数据
  const refreshQueueData = async () => {
    setIsRefreshing(true);
    
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1500));
    
    // 模拟数据变化（实际项目中这里会调用真实的API）
    const newQueueInfo = {
      currentNumber: Math.floor(Math.random() * 5) + 15, // 15-19之间的随机数
      myNumber: queueInfo.myNumber, // 我的排队号通常不变
      waitingCount: Math.floor(Math.random() * 3) + 3 // 3-5之间的随机数
    };
    
    setQueueInfo(newQueueInfo);
    setLastRefreshTime(new Date());
    setIsRefreshing(false);
  };

  const handleRefresh = () => {
    if (!isRefreshing) {
      refreshQueueData();
    }
  };

  // 自动刷新功能（每30秒自动刷新一次）
  useEffect(() => {
    const interval = setInterval(() => {
      refreshQueueData();
    }, 30000); // 30秒

    return () => clearInterval(interval);
  }, []);

  return (
    <div className={styles.container}>
      {/* 头部导航 */}
  <Nabar title='候诊详情' sticky={false} />

      {/* 医生信息卡片 */}
      <div className={styles.doctorCard}>
        <div className={styles.doctorAvatar}>
          <img src={doctorInfo.avatar} alt="医生头像" />
        </div>
        <div className={styles.doctorInfo}>
          <div className={styles.doctorName}>{doctorInfo.name}</div>
          <div className={styles.doctorTitle}>{doctorInfo.title}</div>
          <div className={styles.doctorDepartment}>
            {doctorInfo.department} {doctorInfo.hospital}
          </div>
        </div>
      </div>

      {/* 排队状态框 */}
      <div className={styles.queueStatus}>
        <div className={styles.statusBox}>
          <div className={styles.statusLabel}>当前接诊号</div>
          <div className={styles.statusNumber}>{queueInfo.currentNumber}</div>
        </div>
        <div className={styles.statusBox}>
          <div className={styles.statusLabel}>我的排队号</div>
          <div className={styles.statusNumber}>{queueInfo.myNumber}</div>
        </div>
        <div className={styles.statusBox}>
          <div className={styles.statusLabel}>等待人数</div>
          <div className={styles.statusNumber}>{queueInfo.waitingCount}</div>
        </div>
      </div>

      {/* 刷新按钮 */}
      <div className={styles.refreshButton} onClick={handleRefresh}>
        刷新队列
      </div>

      {/* 刷新遮罩层 */}
      {isRefreshing && (
        <div className={styles.refreshOverlay}>
          <div className={styles.refreshModal}>
            <div className={styles.loadingSpinner}></div>
            <div className={styles.refreshText}>正在刷新中...</div>
          </div>
        </div>
      )}

    

      {/* 底部提示 */}
      <div className={styles.footerNote}>
        注:如有特殊情况,请以现场排队情况为准
      </div>
    </div>
  );
}

export default Index;
